{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });

    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //滑到顶部
            document.body.scrollTop = document.documentElement.scrollTop = 0;
            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);
    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }
        document.getElementById("dir5").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content5');
            animateScroll(target, 250);
        }
        document.getElementById("dir6").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content6');
            animateScroll(target, 250);
        }

        document.getElementById("dir7").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content7');
            animateScroll(target, 250);
        }

        document.getElementById("dir8").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content8');
            animateScroll(target, 250);
        }

        document.getElementById("dir9").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content9');
            animateScroll(target, 250);
        }

        document.getElementById("dir10").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content10');
            animateScroll(target, 250);
        }
        document.getElementById("dir11").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content11');
            animateScroll(target, 250);
        }
        document.getElementById("dir12").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content12');
            animateScroll(target, 250);
        }

    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
</script>

<script>
    $(document).ready(function () {

        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", p);
        $("#bg3").attr("style", bg);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Team";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Attributions";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Collaborations";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Partnership";
        });

    });
</script>
<script>
    $(document).ready(function () {
        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });
        $("#dir4").hover(function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir4").attr("style", value);
        }, function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir4").attr("style", value);
        });
        $("#dir5").hover(function () {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir5").attr("style", value);
        }, function () {
            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir5").attr("style", value);
        });
        $("#dir6").hover(function () {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir6").attr("style", value);
        }, function () {
            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir6").attr("style", value);
        });
        $("#dir7").hover(function () {
            var value = document.getElementById('dir7').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir7").attr("style", value);
        }, function () {
            var value = document.getElementById('dir7').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir7").attr("style", value);
        });
        $("#dir8").hover(function () {
            var value = document.getElementById('dir8').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir8").attr("style", value);
        }, function () {
            var value = document.getElementById('dir8').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir8").attr("style", value);
        });
        $("#dir9").hover(function () {
            var value = document.getElementById('dir9').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir9").attr("style", value);
        }, function () {
            var value = document.getElementById('dir9').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir9").attr("style", value);
        });
        $("#dir10").hover(function () {
            var value = document.getElementById('dir10').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir10").attr("style", value);
        }, function () {
            var value = document.getElementById('dir10').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir10").attr("style", value);
        });
        $("#dir11").hover(function () {
            var value = document.getElementById('dir11').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir11").attr("style", value);
        }, function () {
            var value = document.getElementById('dir11').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir11").attr("style", value);
        });
        $("#dir12").hover(function () {
            var value = document.getElementById('dir12').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir12").attr("style", value);
        }, function () {
            var value = document.getElementById('dir12').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir12").attr("style", value);
        });


    });
</script>

<body class="pc" id="main" style="font-family: 'Quicksand', sans-serif;
font-size: inherit;">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 4%;width: auto;left: 0%;margin :0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/f/f5/T--SZPT-CHINA--team-members2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2" src="https://2021.igem.org/wiki/images/b/b2/T--SZPT-CHINA--team-attributions2.0.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3"
                        src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--team-collaborations2.0.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/5/5a/T--SZPT-CHINA--team-partnership2.0.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/2/23/T--SZPT-CHINA--team-collaborations.png"
                    style="margin-top: -50px;margin-left: 496px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>

        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 12100px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Collaborations</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1"
                            style="color:#ffffff; transition: all 0.3s;width: auto;height: 4vh;margin-top: 3vh;">
                            <p id="dir1p"
                                style="font-size: 0.8rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                                Overview
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:4vh;width: auto;">
                            <p id="dir2p"
                                style="transition: all 0.3s;font-size: 0.8rem;padding-top: 0vh;">
                                NWU-CHINA-A
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir3p"
                                style="transition: all 0.3s;font-size: 0.8rem;padding-top: 0vh;">
                                FAFU-CHINA</p>
                        </div>

                        <div id="dir4" style="color:#ffffff;width: auto;height:4vh;">
                            <p id="dir4p"
                                style="transition: all 0.3s;font-size:0.8rem;padding-top: 0vh;">
                                SZU-CHINA
                            </p>
                        </div>

                        <div id="dir5" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir5p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                Links-CHINA
                            </p>
                        </div>
                        <div id="dir6" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir6p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                NUDT-CHINA
                            </p>
                        </div>

                        <div id="dir7" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir7p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                TJU-CHINA
                            </p>
                        </div>

                        <div id="dir8" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir8p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                CAU-CHINA
                            </p>
                        </div>


                        <div id="dir9" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir9p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                The 5th Southern China Meetup
                            </p>
                        </div>


                        <div id="dir10" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir10p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                CCiC
                            </p>
                        </div>


                        <div id="dir11" style="color:#ffffff;width: auto;height: 4vh;">
                            <p id="dir11p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                Skin League
                            </p>
                        </div>



                        <div id="dir12"
                            style="color:#ffffff;width: auto;height: 6vh;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                            <p id="dir12p"
                                style="font-size: 0.8rem;padding-top: 0vh;">
                                Synthetic Biology in Daily Life</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">
                    ● Overview

                </div>

                <div class="pb">
                    A single thread does not make a rope, and a single tree does not make a forest. It’s very useful for
                    the
                    project to understand different ideas and experiences through collaboration. This year, in order to
                    better improve our project and deepen communication with other teams. We have established
                    collaboration
                    relations with NWU-CHINA-A, FAFU-CHINA, SZU-CHINA, Links-CHINA, TJU-CHINA and other teams. Besides,
                    We
                    jointly organized a series of live broadcasts of synthetic biology in daily life with NWU-CHINA-A,
                    TJU-CHINA and TJUSLS-CHINA.
                </div>


                <div id="content2" class="yj">
                    ● NWU-CHINA-A
                </div>
                <img src="https://2021.igem.org/wiki/images/b/b6/T--SZPT-CHINA--collaborations-pic-1.png"
                    style="margin-top: 70px;width: 400px;margin-left: 350px;"></img>



                <div class="pb">
                    NWU-CHINA-A has been our partner since our team participated in the iGEM competition. In this year’s
                    collaboration, we have <strong> jointly solved many problems related to basic experimental,</strong>
                    and
                    exchanged a lot
                    of ideas on HP's questionnaire survey, education cooperation and publicity.
                </div>


                <div id="content3" class="yj">
                    ● FAFU-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/0/06/T--SZPT-CHINA--collaborations-pic-2.png"
                    style="margin-top: 70px;width: 200px;margin-left: 450px;"></img>



                <div class="pb">
                    The questionnaire is a bridge between the project and the public. The continuous improvement of the
                    project is inseparable from the public's ideas, so it is very necessary to conduct a questionnaire
                    survey. Although the epidemic is still raging this year, it still can't stop our team from
                    understanding
                    the public's ideas. In order to get the information we want to know from the public more
                    effectively, we
                    discussed with the team of FAFU-CHINA and <strong> give each other suggestions for improvements
                        before
                        conducting
                        the questionnaire survey,</strong> which makes our questionnaire more accurate. Finally, we
                    summarized the
                    answers we wanted to know in the questionnaire we received, and these answers also make the progress
                    of
                    our project.</div>



                <div id="content4" class="yj">
                    ● SZU-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--collaborations-pic-3.png"
                    style="margin-top: 70px;width: 250px;margin-left: 400px;"></img>



                <div class="pb">
                    This year, we invited the team of SZU-CHINA to our laboratory for an offline project exchange
                    meeting.
                    During the exchange, SZU-CHINA told our team that the safety form is needed to fill in this year
                    based
                    on last year's experience. The pH-sensing promoters used in the project of SZU-CHINA this year, and
                    the
                    (prcfB)promoters used in our school's team project in 2019 happens to be the pH-sensing promoters.
                    Therefore, <strong> we provided the promoters to the SZU-CHINA</strong>, and our senior students who
                    participated in the
                    competition in the same year provided experimental guidance when SZU-CHINA group encountered
                    difficulties in the experiment.</div>


                <div id="content5" class="yj">
                    ● Links-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/e/e5/T--SZPT-CHINA--collaborations-pic-4.png"
                    style="margin-top: 70px;width: 250px;margin-left: 420px;"></img>



                <div class="pb" style="margin-top: 30rpx;">
                    At the 5th Southern China Regional Meeting, we met the Links-CHINA team. Like our team, they also
                    use
                    <i>Gluconacetobacter</i> as a chassis microorganism. After many exchanges, <strong> we gave the
                        links
                        team relevant
                        literature on <i>Gluconacetobacter</i> Electroporation and guided the Electroporation
                        process.</strong>
                </div>


                <div id="content6" class="yj">
                    ● NUDT-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/9/9d/T--SZPT-CHINA--collaborations-pic-5.png"
                    style="margin-top: 70px;width: 250px;margin-left: 420px;"></img>



                <div class="pb" style="margin-top: 30rpx;">
                    This year, we have online communication with the NUDT-CHINA team on the experiments and HP. In the
                    experimental part, we communicated about light regulation. The NUDT-CHINA team suggested that we
                    should
                    pay attention to the interference between different colors of light when introducing the two
                    plasmids
                    into the engineering bacteria in the later stage of the experiment. In addition, they were also
                    suggested that we should pay attention to the time of red and blue light exposure. At the same time,
                    we
                    <strong> recommended Professor Ye Haifeng, an optogenetics expert,</strong> to the NUDT-CHINA team.
                    NUDT-CHINA, as a
                    member of the skin alliance, we <strong> shared our charity sale ideas </strong>with them and
                    <strong> exchanged experiences on the
                        design of pictures.</strong>
                </div>





                <div id="content7" class="yj">
                    ● TJU-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/9/93/T--SZPT-CHINA--collaborations-pic-6.png"
                    style="margin-top: 70px;width: 250px;margin-left: 420px;"></img>



                <div class="pb" style="margin-top: 30rpx;">
                    Fate is always wonderful, and the four great classics in Chinese literature are also well-known.
                    Since
                    our team's promotion video was submitted, we have decided to extract some elements from the
                    promotion
                    video to make WeChat emoticons packs. Promotion video produced by the TJU-CHINA this year also draws
                    on
                    the story from Journey to the West, and our cooperation with the TJU-CHINA began. Our team shared a
                    lot
                    of HP experience with the TJU-CHINA. In addition, we <strong> jointly organized a series of live
                        broadcasts of
                        synthetic biology in daily life.</strong>

                </div>


                <div id="content8" class="yj">
                    ● CAU-CHINA
                </div>
                <img src="https://2021.igem.org/wiki/images/0/01/T--SZPT-CHINA--collaborations-pic-7.png"
                    style="margin-top: 70px;width: 250px;margin-left: 420px;"></img>



                <div class="pb" style="margin-top: 30rpx;">
                    This year, in view of the similar direction of the product, our two teams have cooperated to a
                    certain
                    extent. In September, we had an online communication and discussed the problems encountered in each
                    other's experiments. Since <i>Pseudomonas aeruginosa</i> was used in our experiment, CAU-CHINA asked
                    about our
                    safety form. At the same time, we also put forward some suggestions for the design of CAU-CHINA
                    products
                    and <strong>recommended living bacteria agent enterprise Shenzhen Agrecoe Bio-technology
                        Co.,Ltd.</strong>
                </div>

                <div id="content9" class="yj">
                    ● The 5th Southern China Meetup
                </div>
                <img src="https://2021.igem.org/wiki/images/e/ea/T--SZPT-CHINA--collaborations-pic-8.png"
                    style="margin-top: 70px;width: 572px;margin-left: 247px;"></img>



                <div class="pb" style="margin-top: 50rpx;">
                    Hosted by SZU-CHINA, the 5th Southern China Meetup offered great chances for participants to improve
                    their understanding of iGEM and facilitate further collaborations. For example, we met the links
                    team at
                    the exchange meeting, and we provided the links team with relevant literature on
                    <i>Gluconacetobacter</i>
                    Electroporation in the subsequent communication. </div>


                <div id="content10" class="yj">
                    ● CCiC
                </div>
                <img src="https://2021.igem.org/wiki/images/3/33/T--SZPT-CHINA--collaborations-pic-9.png"
                    style="margin-top: 70px;width: 700px;margin-left: 283px;"></img>



                <div class="pb" style="margin-top: 50rpx;">
                    Conference of China iGEMer Community (CCiC) is a synthetic biology festival renowned for its
                    specialty
                    and interactivity. Due to the requirements of epidemic prevention, teams in some regions cannot
                    attend
                    the offline meeting, this year's CCiC is held in the form of an online and offline merger. In this
                    exchange meeting, each team spoke freely about their own team's projects. And some judges and
                    teachers
                    commented on our projects from many perspectives such as design, safety and practicability. At this
                    exchange meeting, we also met a new partner NUDT-CHINA team.</div>

                <div id="content11" class="yj">
                    ● Skin League
                </div>
                <img src="https://2021.igem.org/wiki/images/7/76/T--SZPT-CHINA--collaborations-pic-10.png"
                    style="margin-top: 70px;width: 500px;margin-left: 324px;"></img>



                <div class="pb" style="margin-top: 50rpx;">
                    At the end of June, our team members sought cooperation in the iGEM community QQ in China, and
                    finally
                    received picks from WHU-CHINA and HUST2-CHINA. In early July, we established the "Skin League"
                    cooperation organization and <strong> jointly produced brochures to publicize our projects and
                        popularize
                        skin-related knowledge. </strong>At the end of July, NUDT-CHINA's friends also joined our Skin
                    League.


                    <a href="https://2021.igem.org/Team:SZPT-CHINA/Education"> (Please
                        click education for details)</a>
                </div>


                <div id="content12" class="yj">
                    ● Synthetic Biology in Daily Life
                </div>
                <img src="https://2021.igem.org/wiki/images/6/61/T--SZPT-CHINA--collaborations-pic-11.png"
                    style="margin-top: 70px;width: 500px;margin-left:352px;"></img>



                <div class="pb" style="margin-top: 50rpx;">
                    "Synthetic Biology" may be an unfamiliar term to the public. In order to enable more people to
                    understand synthetic biology, our four teams jointly launched a series of live broadcasts of
                    synthetic
                    biology in daily life this year. We explained this year's project in the live broadcast while also
                    contacted the projects on the same track in previous years for simple project science
                    popularization,
                    connecting the project with all aspects of daily life and explaining the project in an
                    easy-to-understand way.
                    <a href="https://2021.igem.org/Team:SZPT-CHINA/Education"> (Please click education for details)</a>
                </div>

            </div>
            <div id="red"
                style="float: left;margin-left: 140px; height: 12100px;width: 55px;background-color: #d44225;">
            </div>

        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
        style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            //document.getElementById('mainImg').style = "margin-top:45px";
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/12100/, "15200")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/12100/, "15200")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir1").attr("style", value);

            //适配top
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir5').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir5").attr("style", value);

            var value = document.getElementById('dir6').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir6").attr("style", value);

            var value = document.getElementById('dir7').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir7").attr("style", value);


            var value = document.getElementById('dir8').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir8").attr("style", value);



            var value = document.getElementById('dir9').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir9").attr("style", value);



            var value = document.getElementById('dir10').getAttribute("style")
            value = value.replace(/4vh;/, "1.5vh;")
            $("#dir10").attr("style", value);


            var value = document.getElementById('dir11').getAttribute("style")
            value = value.replace(/4vh/, "1.5vh")
            $("#dir11").attr("style", value);


            var value = document.getElementById('dir12').getAttribute("style")
            value = value.replace(/6vh/, "2.5vh")
            $("#dir12").attr("style", value);




            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.2rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir4p").attr("style", value);

            var value = document.getElementById('dir5p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir5p").attr("style", value);


            var value = document.getElementById('dir6p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir6p").attr("style", value);

            var value = document.getElementById('dir7p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir7p").attr("style", value);


            var value = document.getElementById('dir8p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir8p").attr("style", value);



            var value = document.getElementById('dir9p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir9p").attr("style", value);


            var value = document.getElementById('dir10p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir10p").attr("style", value);


            var value = document.getElementById('dir11p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir11p").attr("style", value);


            var value = document.getElementById('dir12p').getAttribute("style")
            value = value.replace(/0.8rem/, "0.8rem")
            $("#dir12p").attr("style", value);


            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 930;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>